<template>
  <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        :default-active="defaultActive"
        text-color="#fff"
        router
        unique-opened
        :collapse=$store.state.user.toggleSide
      >
        <el-sub-menu :index="item.id+''" v-for="(item, index) in List" :key="item.id">
          <template #title>
            <!-- 字体图标遍历 -->
            <el-icon>
              <component :is="iconList[index]" ></component>
            </el-icon>
            <span>{{item.authName}}</span>
          </template>

          <el-menu-item
          :index="'/'+item.path"
          v-for="item in item.children"
          :key="item.id"
          @click="savePath(item.path)"
          >
          <el-icon><Menu /></el-icon>
            {{$t(`menus.${item.path}`)}}
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
</template>

<script setup>
import { menuList } from '@/api/menu'
import { ref } from 'vue'

// 获取数据列表
const List = ref([])
const click = async () => {
  List.value = await menuList()
  console.log(List.value)
}
click()

// 默认点开的路由路径
const defaultActive = ref(sessionStorage.getItem('path') || '/users')
const savePath = (path) => {
  // 将路径存储起来
  sessionStorage.setItem('path', `/${path}`)
}

// 字体图标遍历
const iconList = ref(['UserFilled', 'setting', 'shop', 'tickets', 'pie-chart'])

</script>

<style>

</style>
